<template>
  <div v-if="show">
    <el-col :span="12">
      <el-carousel indicator-position="none">
        <el-carousel-item v-for="(item,index) in mapList" :key="index">
          <div style="height: 290px;padding: 13px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);border-radius: 8px;background: #2c3e50;margin-top: 8px">
            <div style="display: flex;justify-content: space-between">
              <dv-capsule-chart :config="item" style="width:90%;height:260px;margin:auto" />
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-col>
  </div>
</template>

<script>
import resize from '@/components/Mixins/resize'
import { cityDeviceNum } from '@/api/iot/iotDeviceBelongApi'
export default {
  name: 'DeviceNumMap',
  mixins: [resize],
  data() {
    return {
      mapList: [],
      show: false
    }
  },
  mounted() {
    this.cityDeviceNum()
  },
  methods: {
    cityDeviceNum() {
      cityDeviceNum(null).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.show = true
          const mapList = []
          let dataList = {
            data: []
          }
          let i = 0
          let count = 0
          data.forEach(item => {
            dataList.data.push({
              name: item.city,
              value: item.num
            })

            if (count > 6) {
              count = 0
              mapList.push(dataList)
              dataList = {
                data: []
              }
              i = i + 1
            } else {
              count = count + 1
            }
          })
          mapList.push(dataList)
          this.mapList = mapList
        }
      })
    }
  }
}
</script>


